@charset "utf-8";
@charset "utf-8";
@import "common/reset";
@function r($px) {
    @return $px/100*1rem;
}

$color:#FF9344;
//
.wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0 r(21);
    header {
        .back-btn{
            width: r(123);
            height: r(57);
            background-color: transparent;
            border: r(2) solid $color;
            border-radius: r(18);
            font-size: r(26);
            margin-top: r(31);
            outline: none;
        }
        .select {
            width: r(163);
            height: r(60);
            border: r(3) solid $color;
            position: relative;
            margin-top: r(30);
            &::before {
                content: "";
                border: r(15) solid $color;
                border-color: $color transparent transparent transparent;
                position: absolute;
                top: r(22);
                right: r(11);
                z-index: 1;
            }
            select {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                border: none;
                -webkit-appearance: none;
                padding-left: r(20);
            }
        }
        .fenlei{
            width: 10%;
            margin: r(47) auto 0;
            font-size: r(26);
        }
    }
    section{
        width: 100%;
        position: absolute;
        left: 0;
        top: r(105);
        bottom: r(150);
        overflow: hidden;
        overflow-y: auto;
        padding: 0 r(21);
        .fenlei-box{
            padding: r(19) 0 r(52);
            .img-box{
                width: r(149);
                height: r(187);
                text-align: center;
                font-size: 0;
                img{
                    width: 100%;
                }
                p{
                    font-size: r(26);
                    margin-top: r(9);
                }
                &:nth-last-of-type(1),&:nth-last-of-type(4){
                    margin-right: r(34);
                }
            }
        }
        //public title  S
        .hot-title {
            span:nth-of-type(1) {
                font-size: r(30);
                vertical-align: middle;
                i {
                    font-size: r(56);
                    color: $color;
                    vertical-align: middle;
                }
            }
            span:nth-of-type(2) {
                font-size: r(24);
                line-height: r(56);
                i {
                    font-size: r(25);
                    color: $color;
                }
            }
        }
        //public title  E
        .imgs-box{
            margin: r(30) 0 r(50);
            .img-box{
                width: r(133);
                height: r(133);
                margin-right: r(57);
                img{
                    width: 100%;
                }
                &:last-of-type{
                    margin-right: 0;
                }
            }
        }
    }
}